<template>
    <n-dropdown class="user-info"
                trigger="hover"
                @select="handleSelect"
                :show-arrow="true"
                :options="options"
    >
        <div class="user-info-box">
            <PersonOutline v-if="fallback"></PersonOutline>
            <n-avatar
                v-if="!fallback"
                round
                object-fit="cover"
                :src="Person"
                @error="errorHandle"
                style="background-color: #F3F3F3"
            ></n-avatar>
        </div>
    </n-dropdown>
    <!-- 系统设置 model -->
    <!--  <go-sm-set v-model:modelShow="modelShow"></go-sm-set>-->
    <!--  &lt;!&ndash; 关于软件 model &ndash;&gt;-->
    <system-info v-model:modelShow="modelShowInfo"></system-info>
</template>

<script lang="ts" setup>
import {h, ref} from 'vue'
import {NAvatar, NText} from 'naive-ui'
import {renderIcon} from '@/utils'
// import { SystemSet } from '@/components/SystemSet/index'
import {SystemInfo} from '@/components/SystemInfo/index'
import Person from './person.png'
import {useUserStore} from "@/stores";
import {PersonOutline} from '@vicons/ionicons5'

// defineOptions({name: 'UserInfo'});
// const t = window['$t']

const modelShowInfo = ref(false)
// const modelShow = ref(false)

// 是否失败
const fallback = ref(false)
const userStore = useUserStore()
// 用户图标渲染
const renderUserInfo = () => {
    return h(
        'div',
        {
            style: 'display: flex; align-items: center; padding: 4px 6px;'
        },
        [
            h(NAvatar, {
                size: "medium",
                round: true,
                style: 'margin-right: 12px;',
                src: Person
            }),
            h('div', null, [
                h('div', null, [
                    h(NText, {depth: 2}, {default: () => sessionStorage.getItem("tib_name")})
                ])
            ])
        ]
    )
}
const options = ref([
    {
        label: '我的信息',
        key: 'info',
        type: 'render',
        render: renderUserInfo
    },
    {
        type: 'divider',
        key: 'd1'
    },
    {
        label: '系统设置',
        key: 'sysSet',
        icon: renderIcon(PersonOutline)
    },
    {
        label: '关于软件',
        key: 'contact',
        icon: renderIcon(PersonOutline)
    },
    {
        type: 'divider',
        key: 'd3'
    },
    {
        label: '退出登录',
        key: 'logout',
        icon: renderIcon(PersonOutline)
    }
])

// 图片渲染错误
const errorHandle = (e: Event) => {
    // fallback.value = true
    window.$message?.info(e.type)
}
// 系统设置
const sysSetHandle = () => {
    // modelShow.value = true
    window.$message?.info('sysSetHandle')
}

// 系统设置
const sysInfoHandle = () => {
    // window.$message?.warning('sysInfoHandle')
    modelShowInfo.value = true
}

const logout = () => {
    userStore.logout()
}

const handleSelect = (key: string) => {
    switch (key) {
        case 'contact':
            sysInfoHandle()
            break
        case 'sysSet':
            sysSetHandle()
            break
        case 'logout':
            logout()
            break
    }
}
</script>

<style lang="scss" scoped>
.user-info {
    padding: 30px;

    &-box {
        //padding: 10px;
        cursor: pointer;
        transform: scale(0.7);
    }
}

</style>
